<template>
  <div class="text-red-500">主页</div>
  <button class="w-64 h-64 border" @click="add">按钮</button>
  <Home></Home>
  <About></About>
  <Page></Page>
</template>
<script setup lang="ts">
import Home from './component/home.vue'
import Page from './component/page.vue'
import About from './component/about.vue'
import { allStore } from '@/store/allStore'
import router from '@/router'
import { reactive, toRefs, ref } from 'vue'
const data = reactive({
  username: '小王'
})
const { username } = toRefs(data)
// 路由和pinia使用
const add = () => {
  const store = allStore()
  store.$state.username = username.value
  router.push('/')
}

</script>
<style scoped>

</style>